<script setup lang="ts">
import { getDataFn } from "@/api/getPro";
import { ref,type Ref ,onMounted,computed} from "vue";
import { useRouter,useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

const proList:Ref<any[]> = ref([])
const proListSeaFood:Ref<any[]> = ref([])
const active:Ref<number> = ref(0)
const searchShop:Ref<string>=ref('')

const option1:Ref<Array<any>> = ref([{text: '综合排序', value: 0 },{ text: '评分高', value: 1 }]) 

const option2:Ref<Array<any>> = ref([{text: '全部筛选', value: 0 },{ text: '评分', value: 1 }])
const value1:Ref<number> = ref(0)
const value2:Ref<number> = ref(0)
    

const proListFilter:Ref<any[]> = computed(() => {
    let list:any[] = []
  if(value1.value == 1 && !searchShop.value){
    // list = list.sort((a,b) => b.score - a.score)
    list = proList.value.filter(item => item.score >= 4.8)
    return proList.value.filter(item => item.score >= 4.8)
  }
  else if(searchShop.value && value1.value == 0){
    return proList.value.filter(item => item.shopname.includes(searchShop.value))
  }
  //选择平分高时 做搜索
  else if(searchShop.value && value1.value==1){
    return (proList.value.filter(item => item.score >= 4.8)).filter(item => item.shopname.includes(searchShop.value))
  }
  else{
    return proList.value
  }
})

function kindClick(id:number){
    console.log(id);   
}

function enterShopClick(id:number){
    console.log(id);
    router.push({
        name:'shop',
        query:{
            id:id
        }
    })
    
}

onMounted(() => {
  getDataFn().then(res => {
    console.log(res);
    proList.value = res
    console.log(proList.value);

    proListSeaFood.value = res.slice(0,4)
  })
})
</script>

<template>
    <div>
        <header class="header">
    <!-- <i class="iconfont icon-gouwuche"></i> -->
     <van-icon @click="$router.back()" name="arrow-left" color="white"  size="20px"/>
     <h3 style="color:white">店铺列表</h3>
    <van-icon name="cart-o" color="white" badge="2" size="25px"/>
</header>
<van-search v-model="searchShop" shape="round" style="width: 320px;" placeholder="请输入搜索关键词" />
    
<van-grid :column-num="5" icon-size="35px" :border="false">
    <van-grid-item icon="qr" icon-color="#f7b731"  text="全部" />

  <van-grid-item v-for="item in proListSeaFood" :key="item.id" :text="item.category">
    <template #icon>
       <p :style="{background:item.color,width:'35px',height:'35px',borderRadius:'50%',opacity:0.3}"></p>
    </template>
    </van-grid-item>
</van-grid>

<!-- 筛选 -->
<van-dropdown-menu active-color="orange">
  <van-dropdown-item  v-model="value1" :options="option1" >
    <!-- <template #title>
        <div>
            销量 速度
        </div>
    </template> -->
    </van-dropdown-item> 
  <van-dropdown-item  v-model="value2" :options="option2" />
</van-dropdown-menu>
<!-- <p>销量   速度</p> -->

<van-card @click="enterShopClick(item.id)" v-for="item in proListFilter" :key="item.id"
  :num="item.salenum"
  :price="item.avgprice"
  :desc="item.shopname"
  :title="item.shopname"
  :thumb="item.img"
>
  <template #tags>
    <van-tag plain type="primary">月销量{{item.salenum}}</van-tag>
    <van-tag plain type="primary">{{item.score}}分</van-tag>
  </template>
  <template #footer>
    <van-button size="mini">按钮</van-button>
    <van-button size="mini">按钮</van-button>
  </template>
</van-card>


    </div>
</template>

<style lang="scss" scoped>
.header{
     height: 4rem;
     width: 100%;
     background: linear-gradient(to right, #f1963e, #ee7950);
     padding: 0;
     margin: 0;
     box-sizing: border-box;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 10px;
  }
</style>